import React, {useEffect, useState} from 'react';
import {message, Spin} from "antd";
import './index.css'
import {useLocation} from "react-router-dom";
import http from "../../../util/http";
import {useAppContext} from "../../../App";

//设置默认内容
const defaultExport = `<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>文档id无效</h1>
</body>
</html>`;

function Details(props) {
    const location = useLocation();
    // let navigate = useNavigate();
    const state = location.state || {}
    const docId = state.docId || -1
    //加载状态
    const [loading, setLoading] = useState(false);
    //文章内容
    const [data, setData] = useState("");
    //标题
    const [title, setTitle] = useState("");
    //创建人--作者
    const [createUser, setCreatUser] = useState("")
    //责编
    const [lastUser, setLastUser] = useState("")
    //创建时间
    const [createTime, setCreateTime] = useState("")
    //修改时间
    const [changeTime, setChangeTime] = useState("")
    //附件列表
    const [files, setFiles] = useState([])

    const {
        routeHistory,
        setRouteHistory,
    } = useAppContext();

    useEffect(() => {
        setData("")
        setLoading(true)
        http.doGet('/doc/gethtml', {id: docId}).then(res => {
            if (res.status === 200) {
                setData(res.content)
                setTitle(res.title)
                setFiles(res.file)
                setCreatUser(res.docCreater)
                setCreateTime(res.doccreatedate)
                setChangeTime(res.doclastmoddate)
                setLastUser(res.docLastUser)
            } else {
                setData(defaultExport)
            }
            setLoading(false)
        }).catch(reason => {
            message.error(reason.message)
            setData("")
            setLoading(false)
        })
    }, [docId])

    // function toPev() {
    //     navigate(-1)
    // }

    function toDownload(fileId) {
        if (fileId) {
            window.open('/doc/sg/download?fileid=' + fileId)
        }
    }

    return (
        <div className="portal-details-main">
            <Spin spinning={loading}>
                <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>

                <div align="center">
                    <div style={{
                        background: 'rgb(233, 233, 233)',
                        margin: '0px auto',
                        padding: '4px',
                        border: '1px solid rgb(194, 194, 194)',
                        borderImage: 'none',
                        width: '950px',
                        lineHeight: '22px'
                    }}>
                        <div align="left" style={{
                            padding: '20px 40px',
                            border: '1px solid rgb(255, 255, 255)',
                            borderImage: 'none',
                            background: 'repeat-x 50% top rgb(255,255,255)'
                        }}>
                            <h2 style={{
                                textAlign: 'center',
                                color: 'rgb(0, 0, 0)',
                                lineHeight: '40px',
                                fontFamily: 'Microsoft YaHei',
                                fontSize: '24px',
                            }}><span style={{fontFamily: 'Microsoft YaHei', fontSize: '24px',}}>{title}</span></h2>

                            <p style={{
                                height: '1px',
                                lineHeight: '1px',
                                textIndent: '2em',
                                fontSize: '0px',
                                borderTopColor: 'rgb(191, 191, 191)',
                                borderBottomColor: 'rgb(216, 216, 216)',
                                borderTopWidth: '1px',
                                borderBottomWidth: '1px',
                                borderTopStyle: 'solid',
                                borderBottomStyle: 'solid',
                            }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p>

                            <div>
                                <p style={{lineHeight: '1.75em', textIndent: '32px',}}>&nbsp;</p>

                                <p style={{lineHeight: '1.75em', textIndent: '32px',}}>
                                    <span style={{fontFamily: 'Microsoft YaHei', fontSize: '16px',}}
                                          dangerouslySetInnerHTML={{__html: data}}/>
                                </p>

                                <p style={{lineHeight: '1.75em', textIndent: '32px',}}>&nbsp;</p>

                                <p style={{textAlign: 'right',}}>&nbsp;</p>
                                <div className="portal-files-list">
                                    <div className="portal-files-list-title">{files.length > 0 ? "附件:" : ""}</div>
                                    <div className="portal-files-list-content">
                                        {
                                            files.map((item, index) => {
                                                return (
                                                    <div className="portal-files-list-item" key={index}
                                                         onClick={() => toDownload(item.fileid)}>
                                                        {item.filename}
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>

                                <p style={{textAlign: 'right',}}>&nbsp;</p>

                                <p style={{textAlign: 'right',}}>
                                    <span style={{
                                        fontFamily: 'Microsoft YaHei',
                                        fontSize: '14px',
                                    }}>作者：{createUser}&nbsp; 责编：{lastUser}&nbsp; 日期：{createTime}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </Spin>
        </div>
    );
}

export default Details;